<template>
  <el-card class="main">
    <el-table
      row-key="date"
      align="center"
      ref="filterTable"
      :data="recordDate"
      border
      style="width: 100%; text-align: center"
    >
      <el-table-column
        prop="date"
        label="进出时间"
        sortable
        column-key="date"
        align="center"
      >
        <template #default="scope">
          <div><i class="el-icon-time"></i> {{ scope.row.data_time }}</div>
        </template>
      </el-table-column>

      <el-table-column
        prop="code"
        label="出入码"
        column-key="code"
        align="center"
      >
        <template #default="scope">
          <div><i class="el-icon-key"></i> {{ scope.row.code }}</div>
        </template>
      </el-table-column>

      <el-table-column
        prop="method"
        label="出入方式"
        filter-placement="bottom-end"
        :filters="[
          { text: '人脸识别', value: 'face' },
          { text: '输码进入', value: 'code' },
        ]"
        :filter-method="filterTag"
        align="center"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.method == 'face'">人脸识别</el-tag>
          <el-tag v-else type="info">输码进入</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { get } from "@/network/record.js";

export default {
  name: "UserAccord",
  data() {
    return {
      recordDate: [],
    };
  },
  created() {
    get().then(
      (res) => {
        this.recordDate = res.data;
        console.log(this.recordDate);
      },
      (err) => {}
    );
  },
  methods: {
    filterTag(value, row) {
      return row.method === value;
    },
  },
};
</script>

<style scoped>
</style>